
function getClass(cls,parent){
    var oParent = parent?document.getElementById(parent):document,
        ele=[],
        elements = oParent.getElementsByTagName("*");
        for(var i=0,j=elements.length;i<j;i++){
            if(elements[i].className==cls){
                ele.push(elements[i]);
            }
        }
        return ele;
}

window.onload = drag;

function drag() {
    var oTitle = getClass("login_logo_webqq", "loginPanel")[0];
    //拖曳面板
    oTitle.onmousedown = fnDown;
    var oClose = document.getElementById("ui_boxyClose");
    //关闭面板
    oClose.onclick = function () {
        document.getElementById("loginPanel").style.display = 'none';
    }
    //切换状态
    var loginState = document.getElementById("loginState"),
        loginList = document.getElementById("loginStatePanel"),
        listText = document.getElementsByTagName("li"),
        loginStateShow = document.getElementById("loginStateShow"),
        loginStatetext = document.getElementById("login2qq_state_txt");

    loginState.onclick = function (e) {
        e = e || window.event;
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
        loginList.style.display = "block";
    }

    for (var i = 0, l = listText.length; i < l; i++) {
        listText[i].onmouseover = function () {
            this.style.background = "#567";
        }
            listText[i].onmouseout = function () {
                this.style.background = "#fff";
            }
            listText[i].onclick = function (e) {
                e = e || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }
                loginList.style.display = "none";
                var id = this.id;
                loginStatetext.innerHTML = getClass("stateSelect_text", id)[0].innerHTML
                loginStateShow.className = "";
                loginStateShow.className = "login-state-show " + id;
            }
        }
        document.onclick = function () {
            loginList.style.display = "none";
        }
}





function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById("loginPanel"),
        disX = event.clientX - oDrag.offsetLeft,
        disY = event.clientY - oDrag.offsetTop;

    document.onmousemove = function (event) {
        event = event || window.event;
        fnMove(event, disX, disY);
    }

    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

function fnMove(e, posX, posY) {
    var oDrag = document.getElementById("loginPanel"),
        width_mouseMove = e.clientX - posX,
        height_mouseMove = e.clientY - posY,
        panelWidth = document.documentElement.clientWidth || document.body.clientWidth,
        panelHeight = document.documentElement.clientHeight || document.body.clientHeight,
        maxMoveWidth = panelWidth - oDrag.offsetWidth,
        maxMoveHeight = panelHeight - oDrag.offsetHeight;
    if (width_mouseMove < 0) {
        width_mouseMove = 0;
    }
    else if (width_mouseMove > maxMoveWidth) {
        width_mouseMove = maxMoveWidth;
    }
    if (height_mouseMove < 0) {
        height_mouseMove = 0;
    }
    else if (height_mouseMove > maxMoveHeight) {
        height_mouseMove = maxMoveHeight;
    }
    oDrag.style.left = width_mouseMove + 'px';
    oDrag.style.top = height_mouseMove + 'px';
}











